<template>
  <div class="calendar-container" >
    <div class="year">
      {{nowDate.year}}年{{nowDate.month+1}}月
      <div style="position: absolute; right:20px; top:2px; z-index: 2">
        <div class="el-button-group">
          <button type="button" @click="lastMonth()" class="el-button el-button--plain el-button--mini"><!----><!----><span>
                上个月
              </span>
          </button>
          <button type="button" @click="curMonth()" class="el-button el-button--plain el-button--mini"><!----><!----><span>
                今天
              </span>
          </button>
          <button type="button" @click="nextMonth()" class="el-button el-button--plain el-button--mini"><!----><!----><span>
                下个月
              </span>
          </button>
        </div>
      </div>
    </div>
    <div style="overflow:auto; width:100%; min-height: 500px; padding-bottom: 20px;">
      <table class="date-table" cellspacing="0" cellpadding="0">
        <tr>
          <th></th>
          <th v-for="day in nowMonthDays" :key="day" >
            {{day}}
          </th>
        </tr>
        <tr v-for="user in avatars">
          <th :style="`width: 30px;text-align: center;  left: 0; ${isPC()?'top: 0;position: sticky;':'top: 200px; min-height:90px;'}`">
            <div><img :src="user.avatar" class="avatar"></div>
            <div style="font-size: 12px;padding: 2px;">{{user.name}}</div>
          </th>
          <td v-for="day in nowMonthDays" :key="day" :class="isToday(nowDate.year+'-'+getMonth(nowDate.month)+'-'+ getDay(day))?'today':''">
            <slot name="dateCell" :data="{day: nowDate.year+'-'+getMonth(nowDate.month)+'-'+ getDay(day)}" :user="user">

            </slot>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
  import {dateUtil} from '@/utils/dateUtil'

  export default {
    props: {
/*      logs:{
        default: function(){ return []},
        type: Array
      },
      comments:{
        default: function(){ return []},
        type: Array
      }*/
    },
    data () {
      return {
        screenWidth: 0,
        selectDate: [],//选择日期列表
        nowDate: this.getDate(new Date()), //当前设置时间 默认为当前系统时间
        avatars: []
      }
    },
    computed: {
      lastMonthDays () {
        return this.startWeek()
      },
      lastMonthStartDay () {
        return this.calcLastMonthDays(this.nowDate.year,this.nowDate.month)-(this.startWeek()-1)
      },
      nowMonthDays () {
        return this.calcDays(this.nowDate.year,this.nowDate.month)
      }
    },
    created () {
      if(this.setDate) {
        this.nowDate = this.getDate(this.setDate)
      }
    },
    mounted(){
      this.screenWidth = document.body.clientWidth
      const that = this
      window.onresize = () => {
        return (() => {
          window.screenWidth = document.body.clientWidth
          that.screenWidth = window.screenWidth
        })()
      }
    },
    methods: {
      isPC() {
        let userAgentInfo = navigator.userAgent;
        let Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
        let flag = true;
        for (let v = 0; v < Agents.length; v++) {
          if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
          }
        }
        return flag;
      },
      isToday(date){
        return dateUtil.thisDay()==date;
      },
      getMonth(m){
        m = m+1;
        if(m<10){
          return '0'+m;
        }
        return m;
      },
      getDay(d){
        if(d<10){
          return '0'+d;
        }
        return d;
      },
      bindAvatars(avatars){
        this.avatars = avatars;
        console.log("bind:"+ JSON.stringify(this.avatars));
      },
      getDate (date) {
        return {
          year: date.getFullYear(),
          month: date.getMonth(),
          day: date.getDay(),
          date: date.getDate()
        }
      },
      //判断闰年
      isLeapYear (year) {
        return (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0);
      },
      //根据日子计算星期
      calcWeekend (year,month,day) {
        return new Date(year,month,day).getDay();
      },
      //计算某年某月的天数
      calcDays (year,month) {
        const monthDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
        if(this.isLeapYear(year)&&month===1)
          return 29
        else
          return monthDay[month]
      },
      //计算上个月天数
      calcLastMonthDays (year,month) {
        if(month===0) {
          return this.calcDays(year-1,11)
        }else {
          return this.calcDays(year,month-1)
        }
      },
      curMonth(){
        this.nowDate = this.getDate(new Date());
      },
      //上月
      lastMonth () {
        if(this.nowDate.month===0) {
          this.nowDate.month = 11
          this.nowDate.year --
        }else {
          this.nowDate.month --
        }
      },
      //下月
      nextMonth () {
        if(this.nowDate.month===11) {
          this.nowDate.month = 0
          this.nowDate.year ++
        }else {
          this.nowDate.month ++
        }
      },
      //去年
      lastYear () {
        this.nowDate.year --
      },
      //下一年
      nextYear () {
        this.nowDate.year ++
      },
      //计算当月开始星期
      startWeek () {
        return this.calcWeekend(this.nowDate.year,this.nowDate.month,1)
      },
      //
      clickEvent (e) {
        let monthNo = this.nowDate.month;
        let month = monthNo<=11?(monthNo+1):0
        let date = {
          year:this.nowDate.year,
          month:month,
          week: new Date(this.nowDate.year,this.nowDate.month,e.target.innerText).getDay(),
          day:Number(e.target.innerText)
        }
        this.$emit('click-event',date);
      }
    }
  }
</script>


<style lang="scss"  scoped>
  .calendar-container {
    padding: 5px; 
  }
  .year {
    width:100%;
    text-align: left;
    padding: 10px;
    height: 40px;
    position: relative;
    font-weight: bold;
  }
  .week,.date{
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
  }
  .week {
    border-bottom: .5px solid #ddd;
    margin-bottom: 5px;
  }
  .none-week {
    color: #aaa;
  }

  .date-table{
    position: relative;
    width: calc(100% - 10px);
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 1200px;
    td{
      border: 1px solid lightgray;
      height: 90px;
      font-size: 12px;
      vertical-align: top;
      padding: 3px;
    }
  }

  .avatar{
    width: 30px;
    height: auto;
    margin-right: 0px;
    border-radius: 100%;
    vertical-align: middle;
  }

  .today{
    background: rgb(217, 236, 255);
  }

</style>
